import { catalog, store } from "@mall/api-services"
import { Button, Card, Checkbox, Col, Divider, Form, Input, InputNumber, Row, Select } from "antd"
import * as _ from "lodash"
import * as React from "react"
import { useEffect, useRef, useState } from "react"
import ProductImages from "./product-images"
import ProductOptions from "./product-options"
import ProductVariants from "./product-variants"

interface ProductFormProps {
  product: catalog.Product;
  loading?: boolean;
  onFinish?: (product: catalog.Product) => void
}

export default function ProductForm(props: ProductFormProps) {
  const [product, setProduct] = useState(props.product)
  const [collections, setCollections] = useState([] as store.CustomCollection[])
  const [form] = Form.useForm()
  const collectionIdsOptionsRef = useRef(null)
  useEffect(() => {
    setProduct(props.product)
    store.CollectionServiceV1.getCollections(props.product.storeId).then(setCollections)
  }, [props.product])
  useEffect(() => form.setFieldsValue(product), [form, product])

  function onFinish(values: any) {
    if (_.isFunction(props.onFinish)) {
      props.onFinish(catalog.Product.assign(product, values))
    }
  }

  function onChangeOptions(options: catalog.ProductOption[]) {
    setProduct(catalog.Product.assign(product, { options }))
  }

  function onChangeVariants(variants: catalog.ProductVariant[]) {
    product.addVariants(variants)
    setProduct(catalog.Product.assign(product))
  }

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  }

  return (
    <Form {...formItemLayout}
          form={form}
          onFinish={onFinish}>
      <Row gutter={[0, 16]}>
        <Col span={24}>
          <Card>
            {/*<Form.Item label="类目">
              <span className="ant-form-text">China</span>
            </Form.Item>*/}
            {/*<Form.Item name="store_id">
              <Input/>
            </Form.Item>*/}
            <Form.Item name="name" label="名称"
                       rules={[{ required: true, message: "请输入名称标题!" }]}>
              <Input placeholder="请输入商品名称"/>
            </Form.Item>
            <Form.Item name="description" label="描述">
              <Input.TextArea placeholder="建议300字以内，未填将根据商品标题自动生成" rows={6}/>
            </Form.Item>
            <div ref={collectionIdsOptionsRef}/>
            <Form.Item name="collection_ids" label="商品分组">
              <Select mode="multiple" placeholder="请选择分组"
                      getPopupContainer={() => collectionIdsOptionsRef.current as unknown as HTMLSelectElement}>
                {
                  _.map(collections, collection =>
                    <Select.Option key={collection.id} value={collection.id} children={collection.name}/>)
                }
              </Select>
            </Form.Item>
          </Card>
        </Col>
      </Row>
      <Row gutter={[0, 16]}>
        <Col span={24}>
          <Card>
            <Form.Item label="选项">
              <Card size="small">
                <ProductOptions options={product.options}
                                onChange={onChangeOptions}/>
                <Divider/>
                <ProductVariants options={product.options}
                                 variants={product.variants}
                                 onChange={onChangeVariants}/>
              </Card>
            </Form.Item>
            <Form.Item
              label="图片">
              <Card size="small">
                <ProductImages product={product} onChange={setProduct}/>
              </Card>
            </Form.Item>
          </Card>
        </Col>
      </Row>
      <Row gutter={[0, 16]}>
        <Col span={24}>
          <Card>
            <Form.Item label="配送方式">
              <Checkbox.Group>
                <Checkbox value="A">快递</Checkbox>
                <Checkbox value="B" disabled>同城配送</Checkbox>
                <Checkbox value="C" disabled>到店自提</Checkbox>
              </Checkbox.Group>
            </Form.Item>
            {/*<Form.Item label="快递运费">
              <Radio style={{ marginRight: 0 }}>固定邮费</Radio>
              <InputNumber style={{ width: "200px" }}
                           formatter={value => `¥ ${value}`}
                           parser={value => _.isUndefined(value) ? "" : value.replace(/¥\s?/g, "")}/>
              <Form.Item className={classes.shippingRule}
                         help="运费模板支持按地区设置运费，按购买件数计算运费，按重量计算运费等">
                <Radio style={{ marginRight: 0 }}>运费模板</Radio>
                <Form.Item noStyle>
                  <Select placeholder="请选择运费模板" style={{ width: "200px" }}/>
                </Form.Item>
                <Button type="link" size="small">刷新</Button>
                <Divider type="vertical"/>
                <Button type="link" size="small">新建</Button>
              </Form.Item>
            </Form.Item>*/}
            <Form.Item label="快递运费" name="fixedShippingCost">
              <InputNumber style={{ width: "200px" }} min={0}
                           formatter={value => `¥ ${value}`}
                           parser={value => _.isUndefined(value) ? "" : value.replace(/¥\s?/g, "")}/>
            </Form.Item>
          </Card>
        </Col>
      </Row>
      <Card>
        <Row gutter={16} justify="center">
          <Col><Button htmlType="button" loading={props.loading} onClick={() => form.submit()}>保存查看</Button></Col>
          <Col><Button type="primary">下一步</Button></Col>
        </Row>
      </Card>
    </Form>
  )
}
